<template>
	<view>
		<!-- 员工扫码记录 -->
		<view v-if="record.list.length">
			<view class="list-item-wrapper" v-bind:id="index" v-for="(item,index) in record.list" :key="index">
				<view class="list-item">
					<view>工号</view>
					<view>{{item.jobNumber}}</view>
				</view>
				<view class="list-item">
					<view>机柜条码</view>
					<view>{{item.deviceBarcode}}</view>
				</view>
				<view class="list-item">
					<view>标准工时</view>
					<view>{{item.timeCount}}</view>
				</view>
				<view class="list-item">
					<view>扫码时间</view>
					<view>{{item.scanTime1}}</view>
				</view>
				<view class="list-item">
					<view>数量</view>
					<view>{{item.count}}</view>
				</view>
				<view class="u-flex u-row-around" style="margin-top: 10rpx">
					<u-button size="medium" type="success" @click="operation(item,index,'addFunc')">添加</u-button>
					<u-button size="medium" type="warning" @click="operation(item,index,'delFunc')">删除</u-button>
				</view>
			</view>
		</view>
		<view v-else>
			<u-empty mode="data"></u-empty>
		</view>
		<u-popup v-model="showFunc" mode="center" width="80%" height="300rpx" border-radius="14">
			<view class="list-items-form">
				<u-form :model="listQuery" ref="uForm">
					<u-form-item label="数量" prop="count">
						<u-input type="number" v-model="listQuery.count" style="width: 60%;" />
					</u-form-item>
				</u-form>
				<view class="u-flex u-row-around item-l">
					<u-button type="info" size="medium" @click="cancel">取消</u-button>
					<u-button type="success" size="medium" @click="submit">提交</u-button>
				</view>
			</view>
		</u-popup>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="showError" :content="content1" @confirm="close"></u-modal>
		<u-modal v-model="show" :content="content" :async-close="true" :show-cancel-button="cancleBtn" @cancel="cancel" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
import { insUserScanCount,delUserScanCount } from '../../../utils/index.js'
	export default {
		data() {
			return {
				content: '是否确定执行该操作',		//弹出框的提示信息
				content1: '',
				show: false,			//弹出框是否显示的条件
				cancleBtn: true,		//弹出框的“取消”按钮显示条件
				record: {},
				listQuery: {
				    deviceBarcode: '',
				    jobNumber: '',
					count: '',
					planNo:''
				},
				index: -1,
				showFunc: false,
				operationType: '',
				rules: {
					// 字段名称
					count: [
						{
							required: true, 
							message: '请输入数量',
							trigger: ['change','blur'],
						}
					]
				},
				showError: false
			}
		},
		methods: {
			// 处理按钮绑定的函数
			// 点击“处理”，调用函数打开的是对话框让用户确认
			//将对应的处理信息复制给listQuery对象
			operation(item,index,type) {
				this.showFunc = true
				this.index = index
				this.operationType = type
				this.listQuery.deviceBarcode = item.deviceBarcode
				this.listQuery.jobNumber = item.jobNumber
				this.listQuery.planNo = item.planNo
			},
			postForm(){
				if(this.listQuery.count == 0) {
					this.content1 = '请输入有效的数量'
					this.showError = true
					return
				}
				this.show = true
			},
			close(){
				this.showError = false
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.postForm()
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			// 弹出框“确认”处理的函数
			confirm() {
				this.opRecord(this.listQuery)
				this.show = false
			},
			// 弹出框“取消”解绑的函数
			cancel() {
				this.show = false
				this.showFunc = false
			},
			// 新增扫码记录
			async opRecord(query) {
				let records = JSON.parse(JSON.stringify(this.record.list))
				const {data} = this.operationType == 'addFunc'?await insUserScanCount(query):await delUserScanCount(query)
				const errMsg = data.msg
				if(data.code == '1'){
					let count = Number(records[this.index].count)
					if(this.operationType == 'addFunc'){
						this.record.list[this.index].count = count + Number(query.count)
					} else {
						this.record.list[this.index].count = count - Number(query.count)
					}
					this.cancel()
					this.$refs.uTips.show({
						title: errMsg,
						type: 'success',
						duration: '2000'
					})
					
				} else {
					this.cancel()
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			}
		},
		// 在进入页面时就从后台请求获取绑定工位的信息
		onLoad(option) {
			let options = JSON.parse(decodeURIComponent(option.item))
			options.list.forEach((item)=>{
				item.jobNumber = item.list[0].jobNumber
				item.scanTime1 = item.list[0].scanTime1
				item.timeCount = item.list[0].timeCount
				item.count = item.list[0].count
				item.planNo = item.list[0].planNo
			})
			this.record = options
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
.page-font {
	font-size: 32rpx;
}
.list-item-wrapper {
	margin: 20rpx;
	padding: 10rpx;
	border-radius: 10rpx;
	background-color: #FFEFD5;
}
.list-item {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	margin: 10rpx 10rpx;
}
.list-items-form{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	flex-direction: column;
}
.item-l{
	width: 100%;
	margin-top: 20rpx;
}
</style>
